<template>
    <div class="pieCard">
        <div class="title">
            <div class="topline"></div>
            {{ title }}
        </div>
        <div>
            <div :id="`pie-${id}`" style="width:80%;height: 300px;"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    icon: "circle",
                    orient: 'vertical', // 设置为垂直方向显示
                    right: 10, // 距离容器右侧的距离
                    top: 'middle', // 垂直居中
                    itemWidth: 20, // 图例项的宽度
                    itemHeight: 10, // 图例项的高度
                    itemGap: 20, // 图例项之间的间隔
                    formatter: (name) => {
                        let data = this.option.series[0].data; // 获取对应系列的数据
                        let total = 0; // 总和
                        for (let i = 0; i < data.length; i++) {
                            total += data[i].value; // 累加数值
                        }
                        let targetData = data.find(function (item) {
                            return item.name === name;
                        }); // 找到对应图例项的数据
                        let percent = ((targetData.value / total) * 100).toFixed(0); // 计算占比，保留两位小数
                        return name + "    " + percent + '%'; // 返回图例显示文本
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: '90%',
                        data: this.optData,
                        emphasis: {
                            // itemStyle: {
                            //     shadowBlur: 10,
                            //     shadowOffsetX: 0,
                            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                            // }
                        }
                    }
                ]
            }
        }
    },
    props: {
        id: {
            type: String,
            required: true
        },
        title: {
            type: String,
            required: true
        },
        optData: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            require: true,
        }
    },
    methods: {
        fnDrawPie() {
            let charts001 = this.$echarts.init(document.getElementById(`pie-${this.id}`));
            charts001.setOption(this.option)
        },
    },
    mounted() {
    },
    watch: {
        optData(newVal, oldVal) {
            if (newVal) {
                this.option.data = newVal;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.pieCard {
    width: 100%;
    height: 100%;

    .title {
        display: flex;
        align-items: center;
        padding: 20px;
        padding: 20px;
        font-size: 16px;
        font-weight: 650;

        .topline {
            width: 5px;
            height: 16px;
            margin-right: 10px;
            background-color: #2B8DC8;
        }
    }
}
</style>